
<template>
  <div>
    <canvas id="three"></canvas>
  </div>
</template>
 
<script setup>
import * as THREE from 'three';
import { onMounted } from "vue";
 
function initThree() {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("#eee");
 
  const threeDemo = document.getElementById("three");
  const renderer = new THREE.WebGLRenderer({canvas: threeDemo, antialias: true});
  const camera = new THREE.PerspectiveCamera(
    30, 
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  )
  camera.position.z = 10;
 
  function annimate() {
    renderer.render(scene, camera);
    requestAnimationFrame(annimate);
  }
  annimate()
};
 
 
 
onMounted(() => {
  initThree();
})
</script>
 
<style scoped lang="scss">
#three {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
</style>